<template>
  <article class="page">
    <headerbar>{{title}}</headerbar>
    <section class="frame-content-sub no-bg">

      <section class="inner-content">
        <div class="input-row-wrap">
<!--          <button class="name" :class="{ active: form.title !=='' || form.content !==''}" :disabled="isDisable" @click="save($event)">发布</button>-->
<!--          <input v-if="topicId" v-model="form.title" type="text" class="title-my" :placeholder="titlePlaceholder">-->
          <div v-if="topicId" class="input-row-wrap title-my" >
            <!--          <div class="name">内容：</div>-->
<!--            <textarea class="title-me" v-model="form.title" :placeholder="titlePlaceholder" name="" cols="30" ></textarea>-->
          </div>
        </div>
        <div v-if="topicId !==''" class="title-cover"><p class="title-me">{{form.title}}</p></div>
<!--        <div class="tips-my" v-if="isShow">
          <div class="left-my" v-if="this.topicId">
            <div class="li-my"><div class="icon-question"></div><div class="left-tip">让你的话题获得更多互动</div></div>
            <p>·&nbsp;保持文字简洁，表述清晰问题的关键点</p>
            <p>·&nbsp;添加合适的话题，让问题更好的流通</p>
          </div>
          <div class="left-my" v-else>
            <div class="li-my"><div class="icon-question"></div><div class="left-tip">让你的话题获得更多互动</div></div>
            <p>·&nbsp;保持文字简洁，表述清晰问题的关键点</p>
            <p>·&nbsp;添加合适的话题，让问题更好的流通</p>
          </div>
          <div @click.stop="back" class="close"><i></i><i></i></div>
        </div>-->

        <div v-if="topicId" class="input-row-wrap">
<!--          参与话题-->
<!--          <div class="name">内容：</div>-->
          <textarea class="title-myTwo" v-model="form.content" :placeholder="contentPlaceholder" name="" cols="30" rows="20"></textarea>
        </div>
<!--        发起话题-->
        <div v-else class="input-row-wrap">
<!--          <div class="name">内容：</div>-->
          <textarea class="title-myOne" v-model="form.title" :placeholder="contentPlaceholder" name="" cols="30" rows="20"></textarea>
        </div>

        <div class="pdv-6"></div>

        <div @click="save($event)" :class="{ active: form.title !=='' || form.content !==''}" :disabled="isDisable" v-preventReClick="1000" class="default-block-btn">发布</div>

        <div class="pdv-5"></div>
      </section>

    </section>
  </article>
</template>

<script>
  export default {
    name: 'learningExperiencesAdd',
    data () {
      return {
        form: {
          title: '',
          content: '',
          // annexInfo: '',
          // spaceType: '4'
        },
        title:'发起话题',
        titlePlaceholder:'输入需要讨论的话题(选填)',
        contentPlaceholder:'快发起一个话题，邀请支部伙伴们一起来分享感受、交流讨论吧！',
        attachmentList: [],
        isShow:true,
        topicId:'',
        isSubmiting:true,//防止重复提交 true 允许提交 false 不允许提交
        oldtitle:'',
        isDisable:false,//防止多次提交
      }
    },
    created () {
      let id = this.$route.query.id
      this.titlePlaceholder = this.$route.query.titlePlaceholder
      this.topicId = this.$route.query.topicId || ''
      if(this.topicId){
        this.title = '参与话题'
        this.form.title = this.oldtitle = this.$route.params.title || ''
        this.titlePlaceholder = '输入参与话题的主题(选填)'
        this.contentPlaceholder = '快来向支部伙伴们展示你的心得体会，表达你的优秀观点吧！你的观点将会获得支部伙伴们的评论和送花哦！'
      }
      console.log(' this.topicId',this.topicId);
      if (id) {
        this.form.title = this.$store.state.branchDetail.title
        this.form.spaceExt = this.$store.state.branchDetail.ext
        this.form.annexInfo = this.$store.state.branchDetail.annexInfo
        this.form.spaceId = id
      }
    },
    methods: {
      uploadFile (file) {
        let uploadFile = file[0]
        let formData = new FormData()
        formData.append('file', uploadFile)
        this.fetchService.o_upload(formData).then((res) => {
          if (res.code !== 0) {
            return this.tools.tip(res.message)
          }
          let ret = res.data
          let data = {
            fileid: ret.fileId,
            filename: uploadFile.name
          }
          this.attachmentList.push(data)
        })
      },
      save (e) {
        this.isDisable = true;//点击后禁用该按钮；
        if (e.target.disabled) {
          return false
        }
        if(this.topicId !=''){
          if (this.form.content === '' || this.tools.isNullStr(this.form.content)) {
            this.isDisable = false;//响应后延迟几秒回复正常；
            return this.tools.tip('内容不能为空')
          }
          let title = this.form.title
          if(this.oldtitle == this.form.title){
            title = ''
          }
          let data={
            // title:title,
            content:this.form.content,
            topicId:this.topicId
          }
          this.fetchService.topic_addXdByTopic(data).then(res => {
            if (res.code !== 0) {
              return this.tools.tip(res.message)
            }
            this.tools.tip('提交成功')
            this.tools.back()
            setTimeout(() => {
              this.isDisable = false;//响应后延迟几秒回复正常；
            }, 1500)
          })
        }else{
          if (this.form.title === ''|| this.tools.isNullStr(this.form.title)) {
            this.isDisable = false;//响应后延迟几秒回复正常；
            return this.tools.tip('请填写标题')
          }
          if(!this.isSubmiting){
            return false
          }
          this.isSubmiting = false
          // if (this.form.content === '') {
          //   return this.tools.tip('内容不能为空')
          // }
          // this.form.annexInfo = JSON.stringify(this.attachmentList)
          console.log('---------------this.form.annexInfo=', this.form.annexInfo)
          this.fetchService.topic_launch(this.form).then(res => {
            if (res.code !== 0) {
              return this.tools.tip(res.message)
            }
            this.tools.tip('提交成功')
            this.tools.back()
            setTimeout(() => {
              this.isDisable = false;//响应后延迟几秒回复正常；
            }, 1500)
          })
        }
      },
      back() {
        this.isShow=false
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .tips-my{
    width: 100%;
    /*height: 2.66667rem;*/
    background: #F5F6F8;
    border-radius: 5%;
    padding: 4%;
    display: flex;
    justify-content: space-between;
    .left-my{
      font-size: 14PX;
      color: #8590A6;
      .li-my {
          font-weight: bold;
          line-height:0.7rem;
          display: flex;
        .icon-question{
          display: inline-block;
          width: 0.7rem;
          height: 0.7rem;
          background: url('../../../../static/images/dangjian/home/icon-question.png') no-repeat center;
          background-size: 100% 100%;
          margin-right: 0.13333rem;
        }
        .left-tip{
          height: 0.7rem;
          line-height:0.7rem;
        }
      }
      >p{
        font-size: 13PX;
        line-height:0.7rem;
      }
    }
    .close {
      /*position: absolute;*/
      /*top: 20px;*/
      /*right: 20px;*/
      z-index: 89;
      width: pxToRem(30px);
      height: pxToRem(30px);
      transform: rotate(45deg);

      i {
        background: #999;
        position: absolute;
      }

      i:first-child {
        top: 50%;
        left: 0;
        margin-top: -1px;
        width: pxToRem(30px);
        height: 2px;
      }

      i:last-child {
        top: 0;
        left: 50%;
        margin-left: -1px;
        height: pxToRem(30px);
        width: 2px;
      }
    }
  }
  .title-cover{
    width: 100%;
    clear:both;
    >p{
      color:#000;
      padding: 0.2rem 0.3rem;
      font-size:17PX;
      font-family: dang,PingFang SC,miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
      text-align: justify;
    }
   }
  .input-row-wrap{
    .name{
      color: #8590A6;
      text-align: right;
      margin-right: 3%;
       pointer-events: none;
      width: 21%;
      font-size: 16PX;
      float: right;
      border: none;
    }
    .active{
      color:#ff0000;
      pointer-events: auto;
      font-weight: bold;
      border: none;
    }
    margin-top:1%;
    textarea::-webkit-input-placeholder{
      line-height: 1.5em;
      /*color:red;*/
      font-size:17PX;
      font-family: PingFang SC,miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
    }
    .title-myOne{
      //border:none;
      font-size: 17PX;
      margin-top: 4%;
      font-family: dang,PingFang SC,miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
    }
    .title-myTwo{
      //border:none;
      font-size: 17PX;
      margin-top: 4%;
      color:#333;
      font-family: PingFang SC,miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
    }
  }
  .title-my{
    textarea::-webkit-input-placeholder{
      /*color:red;*/
      line-height: 1.5em;
      font-size:17PX;
      font-family: dang,PingFang SC,miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;

    }
    .title-me{
      //border:none;
      font-size: 17PX;
    }

  }
  .input-row-wrap input, .input-row-wrap textarea{
    color:#000000;
    padding: 0.3rem 0.2rem 0.3rem 0.3rem;
  }
</style>
